layui.use(['element', 'form', 'table' ], function () {
    var element = layui.element
    var form = layui.form
    var table = layui.table
    var $ = layui.$

    //图标配置文件
    var optsIcon = {
        "0": "./image/w.png",
        '1': "./image/cny.png",
        '2': "./image/USDT.png",
        '3': "./image/btc.png",
        '4': "./image/ETH.png"
    }

    // 国旗图标配置文件
    var langIcon = {
        "0": "./image/China.png",
        '1': "./image/usa.jpg",
    }



    // 初始化图标
    var iconG = new Image()
    iconG.src = optsIcon[1]
    iconG.style.position = "absolute"
    iconG.style.top = "12px"
    iconG.style.left = "25px"
    $('#country input').before(iconG)

    form.on('select(country)', function (res) {

        var opts = {
            "WTL": "./image/w.png",
            'CNY': "./image/cny.png",
            'USDT': "./image/USDT.png",
            'BTC': "./image/btc.png",
            'ETH': "./image/ETH.png"
        }

        data.selectType = res.value

        iconG.src = opts[res.value]
        $('#country input').before(iconG)
    })

    $('#country .layui-anim.layui-anim-upbit').find('dd').each(function (index, item) {
        var img = new Image()
        img.src = optsIcon[index]
        img.style.marginRight="10px"
        $(item).prepend(img)
    })

    $('#lang .layui-anim.layui-anim-upbit').find('dd').each(function (index, item) {
        var img = new Image()
        img.src = langIcon[index]
        img.style.marginRight="10px"
        img.style.width="29px"
        img.style.height="18px"
        $(item).prepend(img)
    })

    $('.l-tab-top .l-tab-item').on('click', function () {
        if(!$(this).hasClass('l-active'))  {
            $(this).addClass('l-active').closest('.l-tab-top').find('.l-tab-item').not($(this)).removeClass('l-active')
            var id = $(this).data('id')

            if(id === 0) {
                data.typeName = "买出"

                // 遍历加载显示模块  index: 0,为卖出，买入模块，1为我的订单模块，2为历史模块
                $('.l-tab-content').each(function (index, item) {
                    if(index != 0) {
                        $(item).css({"display": "none"})
                    } else {
                        $(item).css({"display": "block"})
                    }
                })

            } else if(id === 1) {
                data.typeName = "卖出"

                // 遍历加载显示模块  index: 0,为卖出，买入模块，1为我的订单模块，2为全站订单模块
                $('.l-tab-content').each(function (index, item) {
                    if(index != 0) {
                        $(item).css({"display": "none"})
                    } else {
                        $(item).css({"display": "block"})
                    }
                })

            }  else if (id === 2) {
                // 遍历加载显示模块  index: 0,为卖出，买入模块，1为我的订单模块，2为全站订单模块
                $('.l-tab-content').each(function (index, item) {
                    if(index != 1) {
                        $(item).css({"display": "none"})
                    } else {
                        $(item).css({"display": "block"})
                    }
                })
            } else if (id=== 3) {
                // 遍历加载显示模块  index: 0,为卖出，买入模块，1为我的订单模块，2为全站订单模块
                $('.l-tab-content').each(function (index, item) {
                    if(index != 2) {
                        $(item).css({"display": "none"})
                    } else {
                        $(item).css({"display": "block"})
                    }
                })
            }
        }
    })


    $('.l-tab-bottom .l-tab-item').on('click', function () {
        if(!$(this).hasClass('l-active'))  {
            $(this).addClass('l-active').closest('.l-tab-bottom').find('.l-tab-item').not($(this)).removeClass('l-active')
        }
    })

    //遍历表格，改变字体样式
    // $('.l-show-form tbody tr').each(function (index, item) {
    //     if($(item).children('td').first().text() === "卖出") {
    //         $(item).children('td').first().css({"color": "#4caf50"})
    //     } else {
    //         $(item).children('td').first().css({"color": "#f44336"})
    //     }
    // })


    // 本地测试api 后端修改url请求路径
    function getTable () {
        $.get('/showInfo', function (res) {
            data.showTableList = JSON.parse(res).showTableList
            if(data.showTableList.length === 0) {
                $('.layui-none').css({'display': 'block'})
            } else {
                $('.layui-none').css({'display': 'none'})
                data.showTableList.forEach(function (item, index) {
                    if(item.type === "卖出") {
                        var html = `<tr data-index=${index} style="width: 10%;">
                <td data-field="type" style="color: #4caf50; width: 10%;">
                     <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.type}</div>
                </td>
                <td data-field="price" style="width: 30%;">
                     <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.price}</div>
                </td>
                <td data-field="number" style="width: 30%;">
                    <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.number}</div>
                </td>
                <td data-field="count" style="width: 30%;">
                    <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.count}</div>
                </td>
            </tr>`
                    } else {
                        var html = `<tr data-index=${index} style="width: 100%;">
                <td data-field="type" style="color: #f44336; width: 10%;">
                     <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.type}</div>
                </td>
                <td data-field="price" style="width: 30%;">
                     <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.price}</div>
                </td>
                <td data-field="number" style="width: 30%;">
                    <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.number}</div>
                </td>
                <td data-field="count" style="width: 30%;">
                    <div class="layui-table-cell laytable-cell-1-type l-full-width">${item.count}</div>
                </td>
            </tr>`
                    }
                    $('tbody').append(html)
                })
            }

        })

        // 每过一秒钟请求一次
        // setTimeout(getTable(), 1000)
    }

    getTable();


    // 下滑菜单
    $(".l-glide-menu").on('click', function (e) {
        if(!$('.l-glide-icon').hasClass('l-active'))  {
            $('.l-glide-icon').addClass('l-active')

            // 显示菜单
            $('.l-glide-content').removeClass('l-active')
            //遍历菜单选项
            $('.l-glide-content .l-glide-item').each(function (index, item) {
                Velocity(item, {
                    top:  index*40+"px"
                },{
                    duration: 1000
                })
            })
        } else {
            $('.l-glide-icon').removeClass('l-active')

            //遍历菜单选项
            var glideMenu =  $('.l-glide-content .l-glide-item')
            glideMenu.each(function (index, item) {
                Velocity(item, {
                    top:  0
                },{
                    duration: 1000
                })


                if(index === glideMenu.length -1 )  {
                    setTimeout( function () {
                        $('.l-glide-content').addClass('l-active')
                    }, 1000)
                }
            })

        }
    })

})


var data = {
    selectType: "CNY",
    typeName: "买入",
    width: "",
    showTableList: []
}
var main = new Vue({
    el: '#main',
    data: data
})


